<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户信息查询</title>
  <!-- 引入 ElementUI 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入 Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入 ElementUI 组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入 Axios 用于发送 HTTP 请求 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 查询表单 -->
  <el-card class="query-form">
    <el-form :model="queryForm" label-width="80px">
      <el-form-item label="用户ID">
        <el-input v-model="queryForm.userId" placeholder="请输入用户ID"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="queryForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="queryForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="success" @click="handleAddUser">新增用户</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户信息表格 -->
  <el-card class="user-table">
    <el-table :data="userList" border style="width: 100%">
      <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
      <el-table-column prop="username" label="用户名" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column prop="createdDt" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="updatedDt" label="更新时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEditUser(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteUser(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </el-card>

  <!-- 新增/编辑用户对话框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
    <el-form :model="currentUser" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="currentUser.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="currentUser.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="currentUser.email"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUser">提交</el-button>
        </span>
  </el-dialog>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        // 查询表单数据
        queryForm: {
          userId: '',
          username: '',
          email: ''
        },
        // 用户列表数据
        userList: [],
        // 对话框是否可见
        dialogVisible: false,
        // 对话框标题
        dialogTitle: '新增用户',
        // 当前操作用户
        currentUser: {
          userId: '',
          username: '',
          password: '',
          email: ''
        },
        // 分页相关数据
        currentPage: 1, // 当前页码
        pageSize: 10,   // 每页显示条数
        total: 0        // 总条数
      };
    },
    methods: {
      // 查询用户信息
      handleQuery() {
        const params = {
          userId: this.queryForm.userId,
          username: this.queryForm.username,
          email: this.queryForm.email,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };

        // 发送请求到后端
        axios.post('/user/selectUsersByPage', params)
                .then(response => {
                  this.userList = response.data.list; // 更新表格数据
                  this.total = response.data.total; // 更新总条数
                })
                .catch(error => {
                  this.$message.error('查询失败：' + error.message);
                });
      },
      // 重置查询表单
      resetQuery() {
        this.queryForm = {
          userId: '',
          username: '',
          email: ''
        };
        this.userList = []; // 清空表格数据
        this.currentPage = 1; // 重置页码
        this.handleQuery(); // 重新查询
      },
      // 打开新增用户对话框
      handleAddUser() {
        this.dialogTitle = '新增用户';
        this.currentUser = { userId: '', username: '', password: '', email: '' };
        this.dialogVisible = true;
      },
      // 打开编辑用户对话框
      handleEditUser(user) {
        this.dialogTitle = '编辑用户';
        this.currentUser = { ...user }; // 复制用户信息
        this.dialogVisible = true;
      },
      // 提交用户信息（新增或编辑）
      submitUser() {
        const url = this.currentUser.userId ? '/user/updateUser' : '/user/insertUser';
        axios.post(url, this.currentUser)
                .then(response => {
                  this.$message.success('操作成功');
                  this.dialogVisible = false;
                  this.handleQuery(); // 刷新表格数据
                })
                .catch(error => {
                  this.$message.error('操作失败：' + error.message);
                });
      },
      // 删除用户
      handleDeleteUser(userId) {
        this.$confirm('确定删除该用户吗？', '提示', {
          type: 'warning'
        }).then(() => {
          axios.post('/user/deleteUserById?userId='+userId, { })
                  .then(response => {
                    this.$message.success('删除成功');
                    this.handleQuery(); // 刷新表格数据
                  })
                  .catch(error => {
                    this.$message.error('删除失败：' + error.message);
                  });
        }).catch(() => {
          // 用户取消删除
        });
      },
      // 每页条数改变时触发
      handleSizeChange(val) {
        this.pageSize = val;
        this.handleQuery(); // 重新查询
      },
      // 当前页码改变时触发
      handleCurrentChange(val) {
        this.currentPage = val;
        this.handleQuery(); // 重新查询
      }
    }
  });
</script>

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  .query-form {
    margin-bottom: 20px;
  }
  .user-table {
    margin-top: 20px;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>
</body>
</html>